<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="title">
				家长审核
			</div>
		</my-header>
		<div class="tl cont-nof">
			<div class="weui-cell weui-cell_select weui-cell_select-after">
				<div class="weui-cell__hd">
					<label class="weui-label">班级</label>
				</div>
				<div class="weui-cell__bd">
					<select class="weui-select" @change="queryFn" v-model="params.clazzId">
						<option :value="item.id" v-for="item in clazzList">{{item.gradeName}}-{{item.name}}</option>
					</select>
				</div>
			</div>
			<div class="panel_main tc">
				<div class="panel_list">
					<div class="panel_list_min">学生</div>
					<div class="panel_list_big">家长</div>
          <div class="panel_list_min panel_list_3">
            状态
          </div>
          <div class="panel_list_4"></div>
				</div>
				<div class="panel_main_list">
					<div class="panel_list" v-for="item in judgeList">
						<div class="panel_list_min">
							{{item.studentName}}
						</div>
						<div class="panel_list_big">{{item.kinsfolkName}}({{item.role}})</div>
            <div class="panel_list_min panel_list_3">
              <a class="weui-btn weui-btn_mini weui-btn_default  check-btn" style="color: #007aff" @click="judgeFn(item)" v-if="item.status===0">审核</a>
              <a style="color: #06ae56" v-if="item.status===1">已通过</a>
              <a style="color: orangered" v-if="item.status===2">未通过</a>
            </div>
						<div class="panel_list_4 underline">
							<span v-if="item===active" @click="active = 0">收起</span>
							<span v-else @click="active = item">展开</span>
						</div>
						<div v-if="item===active" class="info-daily">
							<div>
								<span class="fl tr">家长姓名：</span>
								<span class="fr tl">{{item.kinsfolkName}}</span>
							</div>
							<div>
								<span class="fl tr">号码：</span>
								<span class="fr tl">{{item.phone}}</span>
							</div>
              <div>
                <span class="fl tr">学生姓名：</span>
                <span class="fr tl">{{item.studentName}}</span>
              </div>
							<div>
								<span class="fl tr">班级：</span>
								<span class="fr tl">{{item.clazzName}}</span>
							</div>
							<div>
								<span class="fl tr">提交时间：</span>
								<span class="fr tl">{{item.createTime}}</span>
							</div>
						</div>
					</div>
          <div class="weui-loadmore weui-loadmore_line" v-if="judgeList.length===0">
            <span class="weui-loadmore__tips">暂无数据</span>
          </div>
          <div class="weui-cell__bd" @click="loadmore" v-if="params.pages>params.current">查看更多</div>
				</div>
			</div>
	<!--		<div class="pa flex batch-btn">
				<a href="javascript:void (0);" class="weui-btn weui-btn_default check-btn">全部通过</a>
				<a href="javascript:void (0);" class="weui-btn weui-btn_warn check-btn">全部不通过</a>
			</div>-->
		</div>
    <div v-if="dialog.visible">
      <div class="weui-mask"></div>
      <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">{{dialog.title}}</strong></div>
        <div class="weui-dialog__bd"><div class="weui-cells">
          <div class="weui-cell">
            <div class="weui-cell__bd">
              <input class="weui-input" v-model="dialog.form.judgeContent" type="text" placeholder="请输入审核意见"/>
            </div>
          </div>
        </div></div>
        <div class="weui-dialog__ft">
          <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_default" @click="killFn">不通过</a>
          <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_primary" @click="passFn">确定</a>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				params: {
					clazzId: '',
          current: 1,
          size: 10,
          total: 0,
          pages: 0
				},
        dialog:{
          visible:false,
          title:'',
          form:{
            id:'',
            judgeContent:'',
          }
        },
        judgeList: [],
				clazzList: []
			}
		},
		methods: {
      loadmore(){
        this.params.size+=15;
        this.queryFn();
      },
			queryFn() {
				this.$http.fetchKinsfolkJudge(this.params).then(resp => {
					let data = resp.data;
					this.judgeList = data.records;
					Object.assign(this.params, {
						current: data.current,
						size: data.size,
						pages: data.pages,
						total: data.total
					})
				})
			},
      judgeFn(item){
        Object.assign(this.dialog,{
          visible: true,
          title: '【'+item.kinsfolkName+'】的绑定审核',
          form:item
        });
      },
			fetchClazzList() {
				this.$http.fetchClazzList().then(resp => {
					let clazzList = resp.data;
					this.clazzList = clazzList;
					if (clazzList.length === 1) {
						this.params.clazzId = clazzList[0].id;
					}
					this.queryFn();
				})
			},
      killFn(){
        this.$toast.show('提交中', 'loading');
        this.$http.killJudge(this.dialog.form).then(resp=>{
          this.queryFn();
          this.$weui.toast('提交成功');
          this.$toast.hide();
          this.dialog.visible=false;
        })
      },
      passFn(){
        this.$toast.show('提交中', 'loading');
        this.$http.passJudge(this.dialog.form).then(resp=>{
          this.queryFn();
          this.$weui.toast('提交成功');
          this.$toast.hide();
          this.dialog.visible=false;
        })
      },
		},
		created() {
			this.fetchClazzList();
		},
	}
</script>

<style scoped>
	.panel_main {
		width: calc(100% - 2rem);
		height: calc(100% - 11.2rem);
		overflow: hidden;
		font-size: 1.4rem;
		margin: auto;
		border-radius: 6px;
	}

	.panel_list {
		width: 100%;
		display: inline-block;
		padding: 0.5rem 0;
	}
	
	
	.panel_main_list {
		width: 100%;
		height: calc(100% - 4.5rem);
		overflow: auto;
	}

	.panel_list:first-child{
		margin-top: 1rem;
	}
	
	.panel_list:nth-child(2n-1) {
		background: #fff;
	}

	.panel_list>div {
		float: left;
		box-sizing: border-box;
	}

	.panel_list .panel_list_big {
		width: 33.3%;
		padding: 0.2rem 0;
	}

	.panel_list .panel_list_2,
	.panel_list .panel_list_3 {
		display: flex;
		justify-content: space-around;
	}

	.panel_list .panel_list_min {
		width: 20%;
		padding: 0.2rem 0;
	}

	.panel_list .panel_list_3 {
		width: 35%;
	}

	.panel_list .panel_list_4 {
		width: 10%;
		padding: 0.2rem 0;
	}

	.info-daily {
		width: 100%;
		padding: 1rem;
		box-sizing: border-box;
	}

	.info-daily>div {
		width: 100%;
		margin: auto;
	}

	.info-daily span {
		width: 45%;
		margin: 0.5rem 0;
		display: inline-block;
	}

	.batch-btn {
		bottom: 0;
		width: 100%;
		height: 5rem;
		background: #fff;
	}
</style>
